<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
      * {
          margin: 0;
          padding: 0;
      }
      .sharePage {
  min-width: 320px;
  width: 100%;
/*background-color: red;*/
}
.top {
  width: 100%;
  height: 1.12rem;
  background-color: #ccc;
  position: fixed;
  z-index: 999;
}
.f_left {
  float: left;
}

.top .left_back {
  display: block;

  width: 0.32rem;
height:0.32rem;
text-align: center;
/*margin-top: 0.13rem;
margin-left: 0.36rem;*/
}
/*.top .f_title{

}*/
.banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.banner ul:first-child {
  margin-top: 1.17rem;
}
.banner ul:first-child li {
  height: 0.67rem;
  float: left;
  font-size:0.32rem;
  text-align: center;
  line-height:0.67rem;
  margin-left: 0.09rem;

}
.banner ul:first-child {
  margin-top: 1.17rem;
}
.banner ul:first-child li {
  height: 0.67rem;
  float: left;
  font-size:0.32rem;
  text-align: center;
  line-height:0.67rem;
  margin-left: 0.09rem;

}
.nav ul:first-child {
  margin-top: 0.08rem;
}
.nav ul:first-child li {
  widht: 1.749rem;
  height: 0.67rem;
  float: left;
  font-size:0.32rem;
  text-align: center;
  line-height:0.67rem;
  margin-left: 1.08rem;

}
.banner_img {
  width:100%;
  height: 2.72rem;
  /*background-color: lightgrey;*/
}
.banner_img .banner_list {

  text-align: center;
  line-height: 2.40rem;
  width: 100%;
  height: 2.40rem;
  margin: auto;
}
.banner .nav_banner {
  width: 7.496rem;
  height: 0.70rem;

}
.list_img {
  position: relative;
padding-top: .7rem;
width: 100%;
height: 27rem;
text-align: left;
text-shadow: 0 .02rem 0 #000;
}
.star_main{
  position: absolute;
}
.fan{
  top: 0.09rem;
  left: .06rem;
  width: 3.428rem;
  height: 3.43rem;
  /*z-index: 11;*/
  font-size: 0.26rem;
  background: url(./../../image/list_imgs.jpg) no-repeat;
  background-size: 110% 100%;
}
      </style>
  </head>
  <body>
<div class="sharePage">
<div class="top">
 <div class="f_left">
   <div class="left_back">
  <img class="left_back_imgs" src="./../../image/reback.png" alt="">
     </div>
      <div class="f_title">

      </div>
 </div>
</div>
<div class="banner">
  <ul class="clearfix">
    <li>时尚女装</li>
    <li>男装</li>
    <li>球鞋</li>
    <li>名表</li>
    <li>洗护</li>
    <li>食品</li>
    <li>洗护</li>
    <li>食品</li>
      <li>食品</li>
  </ul>
  <div class="banner_img">
<img class="banner_list" src="./../../image/banner.jpg" alt="">
  </div>
  <div class="nav">
  <ul class="nav_banner">
    <li>热门</li>
    <li>上新</li>
    <li>推荐</li>
    <li>价格</li>

  </ul>
  </div>
</div>
<div class="list_img"  style="  margin:auto;display: flex;justify-content: space-between;flex-wrap: wrap;">

        <div class="messageModelBottomImgTwo" style=" width:3.43rem;height:3.50rem;">
          <img src="../../image/list_imgs.jpg"  style=" width:3.43rem;height:3.50rem;"/>
          <p style="  font-size: .26rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: .06rem auto .08rem auto;">我是标题我是标题我是标题...</p>
          <p  style="   font-size: .22rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);">2019.9.10 升级运营总监</p>
        </div>


        <div class="messageModelBottomImgTwo" style=" width:3.43rem;height:3.50rem;">
          <img src="../../image/list_imgs.jpg"  style=" width:3.43rem;height:3.50rem;"/>
          <p style="  font-size: .26rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: .06rem auto .08rem auto;">我是标题我是标题我是标题...</p>
          <p  style="   font-size: .22rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);">2019.9.10 升级运营总监</p>
        </div>


        <div class="messageModelBottomImgTwo" style="margin-top:0.02rem">
          <img src="../../image/list_imgs.jpg"  style=" width:3.43rem;height:3.50rem;"/>
          <p style="  font-size: .26rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: .06rem auto .08rem auto;">我是标题我是标题我是标题...</p>
          <p  style="   font-size: .22rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);">2019.9.10 升级运营总监</p>
        </div>


        <div class="messageModelBottomImgTwo" >
          <img src="../../image/list_imgs.jpg"  style=" width:3.43rem;height:3.50rem;"/>
          <p style="  font-size: .26rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: .06rem auto .08rem auto;">我是标题我是标题我是标题...</p>
          <p  style="   font-size: .22rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);">2019.9.10 升级运营总监</p>
        </div>


        <div class="messageModelBottomImgTwo" >
          <img src="../../image/list_imgs.jpg"  style=" width:3.43rem;height:3.50rem;"/>
          <p style="  font-size: .26rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: .06rem auto .08rem auto;">我是标题我是标题我是标题...</p>
          <p  style="   font-size: .22rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);">2019.9.10 升级运营总监</p>
        </div>


        <div class="messageModelBottomImgTwo"  >
          <img src="../../image/list_imgs.jpg"  style=" width:3.43rem;height:3.50rem;"/>
          <p style="  font-size: .26rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: .06rem auto .08rem auto;">我是标题我是标题我是标题...</p>
          <p  style="   font-size: .22rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);">2019.9.10 升级运营总监</p>
        </div>

</div>
</div>
  </body>
  <script type="text/javascript" src="../../script/api.js">
  //引入该flexible.min.js

  </script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
